<template>
  <div class="lastProfits">
    <div class="details">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="table">
        <!-- 时间 -->
        <el-table-column :label="$t('order.time')">
          <template slot-scope="props">
            {{props.row.poolUtcDate | dateFormatBIH}}
          </template>
        </el-table-column>
        <!-- 收益数量 -->
        <el-table-column :label="$t('newpos.revenueQuantity')">
          <template slot-scope="props">
            {{props.row.nodeIncome || '0.0000'}}
            <span class="wordWrap" style="color: #999">EOS</span>
          </template>
        </el-table-column>
        <!-- 管理费 -->
        <el-table-column :label="$t('newpos.managementExpense')">
          <template slot-scope="props">
            {{props.row.manageFees || '0.0000'}}
            <span class="wordWrap" style="color: #999">EOS</span>
          </template>
        </el-table-column>
        <!-- TrxID -->
        <el-table-column label="TrxID">
          <template slot-scope="props">
            <a class="trxidbox" :href="`https://bloks.io/tx/${props.row.trxId}`" target="_blank">{{props.row.trxId}}</a>
            <p v-if="props.row.trxId2">
              <a class="trxidbox" :href="`https://bloks.io/tx/${props.row.trxId2}`" target="_blank">{{props.row.trxId2}}</a>
            </p>
            <p v-if="props.row.trxId3">
              <a class="trxidbox" :href="`https://bloks.io/tx/${props.row.trxId3}`" target="_blank">{{props.row.trxId3}}</a>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flexb mt">
      <p class="tip">{{ $t('newpos.dailyEarningsTip') }}</p>
      <el-pagination
        :current-page="formData.currPage"
        :page-size="formData.pageSize"
        @prev-click="handlePrevPage"
        @next-click="handleNextPage"
        layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'incomeDetails', // 昨日节点收益
  data() {
    return {
      formData: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      tableData: []
    }
  },
  components: {},
  props: {
    incomeDetailsVisible: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    incomeDetailsVisible: function change(val) {
      if (val) {
        // 收益明细（分红明细）
        this.formData.currPage = 1
        this.handleGetDividendDetailByPage()
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    // 收益明细（分红明细）
    this.handleGetDividendDetailByPage()
  },
  beforeDestroy() {},
  methods: {
    // 收益明细（分红明细）
    handleGetDividendDetailByPage() {
      const params = this.formData;
      this.tableData = [];
      this.$http.post('/pool/getDividendDetailByPage', params).then((res) => {
        if (res.code !== 0) {
          const msg = res.msg || 'System error'
          this.$message.error(msg);
          return;
        }
        this.tableData = res.page.list;
        this.formData.totalCount = res.page.totalCount;
      });
    },
    // 下一页
    handleNextPage() {
      if (this.tableData.length === 0 || this.tableData.length < 10) return;
      this.formData.currPage += 1;
      this.handleGetDividendDetailByPage();
    },
    // 上一页
    handlePrevPage() {
      if (this.formData.currPage === 1) return;
      this.formData.currPage -= 1;
      this.handleGetDividendDetailByPage();
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/newpos/public.scss';
.lastProfits{
  .tip {
    color: #999999;
  }

  /deep/ .table {
    td, th {
      padding: 10px 0 !important;
    }
  }
}

.theme-1B1D27 {
  .lastProfits{
    .tip {
      color: #999999;
    }
  }
  .table {
    /deep/ .el-table__empty-block {
      background: RGBA(33, 42, 63, 1);
    }
  }
}
</style>

